<script setup lang="ts">
import {useRoute, useRouter} from "vue-router";
import {onMounted, reactive, ref} from "vue";
import {CirclePlus, Delete, Discount, DocumentAdd, HomeFilled} from "@element-plus/icons-vue";

const data = reactive({
  user: JSON.parse(localStorage.getItem("code_user") ||"{}"),
})
function setup() {
  const router = useRouter()
  return { router }
}
const router = useRouter(); // 路由实例（用于跳转）
const route = useRoute();   // 当前路由实例（用于获取路径）
const currentRoutePath = ref(route.path); // 绑定当前路由路径
onMounted(() => {
  // 仅在初始进入页面时跳转（避免其他路由返回时重复跳转）
  if (route.path !== '/set') {
    router.push('/set').catch(err => {
      // 捕获“重复跳转同一路由”的错误（可选，避免控制台警告）
      if (!err.message.includes('Avoided redundant navigation')) {
        console.error('路由跳转错误：', err);
      }
    });
  }
  // 监听路由变化，同步菜单激活态
  router.afterEach((to) => {
    currentRoutePath.value = to.path;
  });
});
</script>
<template>
  <div class="body">
        <el-menu
            router="router"
            class="el-menu-vertical-demo"
            :default-active="currentRoutePath"
        >
          <el-menu-item >
            <h1>个人中心</h1>
          </el-menu-item>
          <el-menu-item index="/">
            <el-icon><HomeFilled /></el-icon>
            <span>首页</span>
          </el-menu-item>
            <el-menu-item index="/set">
              <el-icon><Setting /></el-icon>
              <span>设置</span>
            </el-menu-item>
          <el-menu-item index="/addGood">
            <el-icon><CirclePlus /></el-icon>
            <span >物品添加</span>
          </el-menu-item>
          <el-menu-item index="/classification">
            <el-icon><Discount /></el-icon>
            <span>分类列表</span>
          </el-menu-item>
          <el-menu-item index="/ai">
            <el-icon><Discount /></el-icon>
            <span>AI推荐</span>
          </el-menu-item>
          <el-menu-item index="/ai2">
            <el-icon><Discount /></el-icon>
            <span>AI</span>
          </el-menu-item>
        </el-menu>
      <div class="main">
        <router-view ></router-view>
      </div>
  </div>
</template>

<style scoped>
.body{
  display: flex;
  min-height: 100vh;
  background-image: url("../assets/images/bg_g.jpg");
  background-size: cover;
}
.el-menu-vertical-demo{
  position: fixed;
  height: 100%;
  width: 250px;
  background-color: rgba(255, 255, 254, 0.71);
}
.el-icon {
  color: #aa0202;
}
/* 点击激活后的图标样式 */
.el-icon.active,
  /* 适配 Element 菜单选中状态 */
.el-menu-item.is-active .el-icon,
.el-submenu.is-active .el-icon {
  color: #0e0e0e; /* 点击后显示的颜色 */
}
.el-submenu.is-active .el-icon {
  color: #f10404; /* 点击后显示的颜色 */
}
/* 默认选中项样式 */
.el-menu-item.is-active {
  background-color: rgba(169, 138, 138, 0.19) !important;
  border-left: 3px solid #181717 !important;
}
/* 选中项文字样式 */
.el-menu-item.is-active span {
  color: #820505 !important;
  font-weight: 900;
}
/* 悬停效果 */
.el-menu-item:not(.is-active):hover {
  background-color: rgba(230, 210, 218, 0.29) !important;
}
.el-menu-item:not(.is-active):hover span {
  color: #dc0a29;
}
.main{
  padding-top: 70px;
  display: flex;
  flex: 4;
  justify-content: center;
  position: relative;
  margin-left: 250px;
}
</style>